<template>
    <div id="tmpl">
      <div >
        <h4>{{info.title}}</h4>
        <div id="content">
          <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
          <h4 style=" text-align: center; color: #0094ff">※点击图片可查看图片放大效果※</h4>
        </div>
      </div>
      <comment :id="id"></comment>
    </div>

</template>

<script>
  import comment from '../subcom/comment.vue'
    export default{
      components:{
        comment  ,
      },
        data(){
            return{
                id:0,
              info:{},
              list:[],
            }
        },
      mounted(){
            this.id=this.$route.params.id;
            this.getData();
            this.getSuolue();
      },
      methods:{
        getData(){
          this.$http.get('/api/photoinfo',{
            params: {
              nId:this.id
            }
          }).then(res=>{
            this.info=res.data;
          })
        },
        getSuolue(){
          this.$http.get('/api/suoluetu',{
              params: {
                cId:this.id
              }
            }
          ).then(res=>{
              res.data.forEach(item=>{
            let img=document.createElement('img');
            img.src=item.src;
               item.h=img.height;
               item.w=img.width;

              });
            this.list=res.data;
          })
        },
      },
    }
</script>

<style scoped>
  .preview-img{
    padding: 10px;
  }
</style>
